import Taro, { Component, Config } from '@tarojs/taro'
import { Image, View, ScrollView } from '@tarojs/components'
import classNames from 'classnames'
import { getPage } from "@/api/productApi"
import { toGoodsPage } from '@/utils/page_router'
import { TAB_BAR_HEIGHT } from "@/config/config"
import { getCategoryList } from '@/api/categoryApi'
import {Loading, NeedScore, SalePrice, TabBar} from '@/components/index'
import './index.scss'
import {getUnit} from "@/utils/utils";
import GoodsImg from "@/components/goods/goods-img";
import { PRODUCT_SALES_TEXT } from '@/config/file'


export default class Index extends Component {
  state:any
  config: Config = {
    backgroundTextStyle: "dark",
    navigationBarTitleText: '商品分类',
  }

  constructor() {
    super(...arguments)
    this.state = {
      page: 1,
      limit: 10,
      ctyKey: 0,
      ctyList: [],
      loading: false,
      dataList: [],
      loadStatus: 'loading',
    }
  }

  componentDidMount () {
    this.getList()
  }

  //  获取分类数据
  getList() {
    getCategoryList().then(({ data }) => {
      this.setState({
        ctyList: data
      }, () => {
        this.getGoods()
      })
    })
  }

  //  获取商品
  getGoods() {
    const { page, limit, ctyKey, ctyList, dataList, loadStatus }:any = this.state
    if (loadStatus === 'noMore') {
      return
    }

    getPage({ page, limit, categoryId: ctyList[ctyKey].id }).then(res => {
      const { list, totalCount } = res.data
      this.setState({
        page: page + 1,
        dataList: page === 1 ? list : dataList.concat(list),
        loadStatus: (page * limit >= totalCount) ? 'noMore' : 'loading',
      }, () => {
        this.setState({
          loading: false
        })
      })
    })
  }

  //  切换类型
  onSwitchCty(k) {
    // @ts-ignore
    document.getElementById('dataScroll').scrollIntoView()
    this.setState({
      page: 1,
      limit: 10,
      ctyKey: k,
      dataList: [],
      loadStatus: 'loading',
    }, () => {
      this.getGoods()
    })
  }

  render () {
    const { loading, ctyKey, ctyList, dataList } = this.state
    return (
      // @ts-ignore
      <View className='ctyGoods-page xf-page'>
        {loading && <Loading />}
        <View className='page-body' style={{ paddingBottom: `${TAB_BAR_HEIGHT}px` }}>
          {/*scrollTop={0}*/}
          <ScrollView id='tab-bar' scrollY className='cty-list' style={{ height: `calc(100vh - ${TAB_BAR_HEIGHT}px)`}}>
            {ctyList.map((cty, key) => {
              return (<View key={cty.id} className={classNames('cty-item', { 'cty-active': ctyKey === key })} onClick={this.onSwitchCty.bind(this, key)}>{cty.name}</View>)
            })}
          </ScrollView>
          <View className='cty-right'>
            <View id='dataScroll' className='cty-box'>
              {dataList.map((item, key) => {
                return (
                  <View key={key} className='cty-goods' onClick={() => toGoodsPage(item)}>
                    <View className='cty-goods_img'>
                      <GoodsImg info={item} lazyLoad/>
                      {/*src={item.coverImg}*/}s
                      {/*<Image src={item.images[0]} className='w-p-100 h-p-100'/>*/}
                      {item.salesNumber && <View className='salesNumber'>{PRODUCT_SALES_TEXT} {getUnit(item.salesNumber, '+')}</View>}
                    </View>
                    <View className='cty-goods_name t-o-e-2'>{item.name}</View>
                    <View className='d-f a-i-b m-t-10'>
                      <NeedScore goods={item} priceSize={30} className='m-r-10'/>
                      <SalePrice goods={item} priceSize={28}/>
                    </View>
                  </View>
                )
              })}
            </View>
          </View>
        </View>

        <TabBar />
      </View>)
  }
}
